<template>
  <view class="guess_like">
    <Head title="猜你喜欢" :transparent="false" :showBack="false">
      <!-- <text slot="action">搜索</text> -->
    </Head>
    <ItemListComp class="item_box" v-if="templateType === 0 && questionList.length > 0" :questionList="questionList" :userInfo="userInfo" />
    <ItemListComp1 class="item_box" v-if="templateType === 1 && questionList.length > 0" :questionList="questionList" :userInfo="userInfo" />
    <ItemListComp2 class="item_box" v-if="templateType === 2 && questionList.length > 0" :questionList="questionList" :userInfo="userInfo" />
    <view class="cu-load bg-grey" v-if="isLoad" :class="finished?'over':'loading'"></view>
    <ScrollToTop :scrollTop="scrollTop" />
  </view>
</template>

<script>
  import crypto from 'crypto'
  import Head from '@/pages/pagecomponents/head'
  import ItemListComp from '@/pages/pagecomponents/itemlist'
  import ItemListComp1 from '@/pages/pagecomponents/itemlist1'
  import ItemListComp2 from '@/pages/pagecomponents/itemlist2'
  import ScrollToTop from '@/pages/pagecomponents/other/scrolltotop'
  export default {
    components: {
      Head,
      ItemListComp,
      ItemListComp1,
      ItemListComp2,
      ScrollToTop,
    },
    data() {
      return {
        templateType: 0, // 当前物料商品集合所使用的模板ID
        questionList: [],
        param: {
          pageId: 1,
          pageSize: 10,
          materialId: 6708, // 猜你喜欢物料
        },
        isLoad: false,
        finished: false,
        scrollTop: 0, // 页面滚动高度
      }
    },
    computed:{
      userInfo(){
        return this.$store.state.userInfo
      },
    },
    onPageScroll(e) {
      // 滚动条滚动
      this.scrollTop = e.scrollTop
    },
    onPullDownRefresh() {
      // 下拉刷新
      this.getItemList('pullDown')
    },
    onReachBottom() {
      // 触底函数
      this.nextPaging()
    },
    created() {
      // #ifndef APP-PLUS
      this.getItemList()
      // #endif
      // #ifdef APP-PLUS
      plus.device.getInfo({ // 获取IMEI
        success: e =>{
          let imei=e.imei.split(',')[0];
          let hash = crypto.createHash('md5')
          hash.update(imei)
          let imeiMd5 = hash.digest('hex')
          this.param.device_encrypt = 'MD5' // 智能匹配-设备号加密类型：MD5
          this.param.device_type = 'IMEI' // 智能匹配-设备号类型：IMEI，或者IDFA，或者UTDID（UTDID不支持MD5加密）
          this.param.device_value = imeiMd5 // 智能匹配-设备号加密后的值（MD5加密需32位小写）
          
          this.getItemList()
        }
      })
      // #endif
    },
    methods: {
      nextPaging() {
        // 下一页
        if (this.finished !== true) {
          this.param.pageId += 1
          this.getItemList()
        }
      },
      getItemList(type) {
        if (type === 'pullDown') {
          // 下拉刷新
          this.isLoad = true
          this.questionList = []
          this.param.pageId = 1
        }
        this.$api.user.materialList(this.param).then(res => {
          if (type === 'pullDown') {
            // 下拉刷新
            uni.stopPullDownRefresh();
          }
          this.isLoad = false
          if (res.data.list && res.data.list.length <= 0) {
            this.finished = true;
          }
          let imgList = res.data.list
          let questionList = this.questionList
          questionList = questionList.concat(imgList)
          this.questionList = questionList
        })
      },
      refresh() {
        // 刷新
        this.getItemList('pullDown')
      },
    }
  }
</script>

<style scoped lang="scss">
  .guess_like {
    position: relative;
    min-height: 100%;
    padding: 80px 0 50upx;
    // margin-top: var(--status-bar-height);
    .category_top {
      position: fixed;
      top: 49px; // 防止出现空隙
      left: 0;
      right: 0;
      padding: 0 20upx;
      margin-top: var(--status-bar-height);
      z-index: 2000;
      background: #ffffff;
      height: 50px;
      .scroll {
        width: 100%;
        white-space: nowrap;
        .item {
          display: inline-block;
          line-height: 80upx;
          +.item {
            margin-left: 32upx;
          }
        }
        .active {
          color: #4b6c92;
          font-weight: 600;
          border-bottom: 2px solid #4b6c92;
        }
      }
    }
    .item_box {
      // padding: 0 20upx;
      min-height: 800px;
    }
    .cu-load::before {
      content: none
    }
  }
</style>
